<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Menu Demo</title>
<style>
body{
	margin:0;
	padding:0;
	background:url(images/bg.jpg) top left;
}
#nav {
  background:url(images/bg-nav.png) top left repeat-x;
  left: 0;
  list-style: none;
  overflow: hidden;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  height:75px;
  color:red;
  font: 12px tahoma, arial, '微软雅黑';
}
#wrapper {
	width: 960px;
	margin: 100px auto 0;
	padding-top:0;
	*padding-top:100px;
}
#menu-list {
	z-index: 2;
	width: 222px;
}
#menu-list li {
	list-style:none;
}
.menu {
	
}
.menu ul {
	padding-left:0;
}
.main-menu {
	background-color:blue;
	cursor:pointer;
}
.sub-menu {
	
}
.menu-item {
	color:green;
	padding-left:30px;
}

.char1,.char2,.char3,.char4,.char5,.char6,.char7,.char8,.char9{
	display:block;
	float:left;
	width:1.3em;
	margin-left:8px;
	background-color:#afdddf;
	font-family:Garamond,Serif;
	color:#fff;
	text-align:center;
	font-size:1.3em;
	line-height:1.3em;

	-webkit-border-radius:1.3em;
	-moz-border-radius:1.3em;
	border-radius:1.3em;

	-webkit-box-shadow: 0px 0px 5px RGBA(200,200,200,30);
	box-shadow: 0px 0px 5px RGBA(200,200,200,30);
	-moz-box-shadow: 0px 0px 5px RGBA(200,200,200,30);
}

/* button style */
.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: 6px 50px;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}
/* css3 style */
.blue {
	-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
	background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
	background-color:#79bbff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #84bbf3;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #528ecc;
}.blue:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
	background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
	background-color:#378de5;
}.blue:active {
	position:relative;
	top:1px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */
</style>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.easing.1.3.min.js"></script>
<script>
$(document).ready(function() {

	"use strict";

	$("#nav h1").lettering();

	$.easing.def = "easeOutCirc";
	$("li.main-menu").click(function(e) {
		var subMenu = $(this).next();
		$(".sub-menu").not(subMenu).slideUp("slow");
		subMenu.slideToggle("slow");
		e.preventDefault();
	});

	$("li.main-menu").eq(0).click();
});
</script>
</head>
<body>
	<div id="nav">
		<h1>Menu</h1>
	</div>
	<div id="wrapper">
		<div id="show-menu">
				<div id="menu-bg">
					<div id="menu-list">
						<ul>
							<li class="menu">
								<ul>
									<li class="main-menu button blue">main menu</li>
									<li class="sub-menu" style="display:none">
										<ul>
											<li class="menu-item">sbu menu</li>
											<li class="menu-item">sbu menu</li>
											<li class="menu-item">sbu menu</li>
										</ul>
									</li>
								</ul>
							</li>
							<li class="menu">
								<ul>
									<li class="main-menu button blue">main menu</li>
									<li class="sub-menu" style="display:none">
										<ul>
											<li class="menu-item">sbu menu</li>
											<li class="menu-item">sbu menu</li>
											<li class="menu-item">sbu menu</li>
											<li class="menu-item">sbu menu</li>
											<li class="menu-item">sbu menu</li>
											<li class="menu-item">sbu menu</li>
										</ul>
									</li>
								</ul>
							</li>
							<li class="menu">
								<ul>
									<li class="main-menu button blue">main menu</li>
									<li class="sub-menu" style="display:none">
										<ul>
											<li class="menu-item">sbu menu</li>
											<li class="menu-item">sbu menu</li>
											<li class="menu-item">sbu menu</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
		</div>
	</div>
	<div id="footer"></div>
</body>
</html>